<!DOCTYPE html>
<html lang="en">
<head>
<title>Matrix Admin</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="css/uniform.css" />
<link rel="stylesheet" href="css/select2.css" />
<link rel="stylesheet" href="css/matrix-style2.css" />
<link rel="stylesheet" href="css/matrix-media.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/matrix-style.css" />
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

    <!--*********************许永霖************-->
    <!--<link rel="stylesheet" type="text/css" href="assets/css/styles/style.css" />-->
    <link rel="stylesheet" type="text/css" href="assets/css/styles/components-css/list.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/videoSurveillance/videoSurveillance.css" />
    <!--引入bootstrap CSS文件-->
    <link rel="stylesheet" type="text/css" href="assets/lib/bootstrap-3.3.5-dist/css/bootstrapModel.css" />
    <link rel="stylesheet" type="text/css" href="assets/lib/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css"/>
    <!--*****************结束*************-->
<style type="text/css">
		    #header h1{
	        width: 300px;
	    }
		/* css 重置 */
		.thumbnail{
			background: #F9F9F9;
		}
		*{margin:0; padding:0; list-style:none; }
		body{ overflow: auto !important; background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }
		/* 本例子css */
		.picScroll-left{overflow:hidden; position:relative;  border:1px solid #ccc;   }
		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:32px; height:32px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
			 cursor:pointer; background:url("img/slider-arrow.png") no-repeat;}
		.picScroll-left .hd .next{ background-position: -45px 0;  }
		.picScroll-left .hd .prevStop{ background-position:-60px 0; }
		.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
		.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
		.picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
		.picScroll-left .hd ul li.on{ background-position:0 0; }
		.picScroll-left .bd{ padding:10px;   }
		.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
		.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.picScroll-left .bd ul li .pic{ text-align:center; }
		.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
		.picScroll-left .bd ul li .pic a:hover img{ border-color:#999;  }
		.picScroll-left .bd ul li .title{ line-height:24px;   }
		.widget-content{text-align: left;}
		.picList li a:hover{ color: #666;}
		.hd-btn{height:40px !important;position: absolute;width: 92%;margin: 0 4%; padding: 0;top: 40%;z-index: 999;background:rgba(0,0,0,0) !important;}

/******************************许永霖添加************************/

            .col-sm-6{width: 15% ;padding: 2px}
            .clearfix{
                /*background-color: #00a2ca;*/
                padding-left: 10%;
                margin-top: 1%;
            }
            .thumbnail{width: 100%;height: 300px}
            .thumbnail>img {
                width: 100%;
                height:80%;
            }
            .fn-center{
                font-size: 12px;
            }
            .mobile{
                position: absolute;
                z-index: 999;
                top: 4%;
                right: 6%;
                background: rgba(255,255,255,0.9);
                padding: 7px 13px;
                border-radius: 5px;
            }

            .t-list-title{
                border-bottom: 2px solid #EE7600;
            }
            .t-list-title > h2{
                color: #666666;
                font-size: 18px;
                float: none;
                text-shadow: 0 1px 0 #ffffff;
                padding-top: 3px;
                padding-bottom: 3px;
                position: relative;
                margin: 0px 20px 0px 20px;
                font-weight: bold;
            }
            .t-list{
                background: #EEEEEE;
            }
            .modal{
                margin-left:25%;
                width: 1000px;
                height: 750px;
            }
            .modal-open .modal{overflow-y: hidden}
            .navbar .nav{height: 45px}
            .modal.fade.in {
                background-color: rgba(0,0,0,0);
                border:none;
            }
.widget-content{height: 290px}

            /**/
/**********************结束************************/
		</style>
</head>
	


<body>
 <!--Header-part-->
    <div id="header">
<h1><img src="img/logo.jpg" style="float: left;display: block;margin-right: 10px" width="70"> <a href="#" style="float: left;display: block;">智慧工地</a></h1>
    </div>
    <!--close-Header-part--> 

    <!--top-Header-menu-->
    <div id="user-nav" class="navbar navbar-inverse">
        <ul class="nav">
            <li  class="dropdown" id="profile-messages" >
                <a title="" href="#" data-toggle="dropdown" data-target="#profile-messages" class="dropdown-toggle">
                    <i class="icon icon-user"></i>&nbsp;
                    <span class="text">欢迎你，admin</span>&nbsp;
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="icon-user"></i> 个人资料</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="icon-check"></i> 我的任务</a></li>
                    <li class="divider"></li>
                    <li><a href="login.html"><i class="icon-key"></i> 退出系统</a></li>
                </ul>
            </li>
            <li class=""><a title="" href="#"><i class="icon icon-cog"></i> <span class="text">&nbsp;设置</span></a></li>
            <li class=""><a title="" href="login.html"><i class="icon icon-share-alt"></i> <span class="text">&nbsp;退出系统</span></a></li>
        </ul>
    </div>
    
    
<div id="content" class="row-fluid" style="margin: 0;">
  <div id="content-header">
      <h1>项目选择</h1>
      <button class="btn btn-info" style="position: absolute;right: 3%; top: 3%;">新增项目</button>
  </div>

  <div style="overflow: auto;">
  	<div class="picScroll-left span2" style="border: 0;"></div>
  	<div class="picScroll-left span8" style="border: 0;">
			<div class="hd-btn hd">
				<a class="next" ></a>
				<a class="prev" style="float: left;background-position: -175px 0;"></a>
			</div>
			<div class="bd">
				<div class="tempWrap" style="overflow:hidden; position:relative; width: 80% ;margin: auto;">
				<ul class="picList">
					<li>
						<a href="index.html" >
						<div class="widget-box">
				          <div class="widget-title">
				            <h5>襄阳光彩市场</h5>
				          </div>
				          <div class="widget-content">
							<div class="pic"><img src="img/4.jpg" /></div>
							<p>襄阳市卧龙大道567号</p>
				          	<p>启用时间：2015年3月</p>
				          	<p>结束时间：2016年10月</p>
				          	<p>工地状态：已完工</p>
				          </div>
				       </div>
				       </a>
					</li>
					<li>
						<a href="index.html" >
						<div class="widget-box">
				          <div class="widget-title">
				            <h5>武汉雄楚大道</h5>
				          </div>
				          <div class="widget-content">
							<div class="pic"><img src="img/2.png" /></div>
							<p>武汉市雄楚大道103号</p>
				          	<p>启用时间：2016年5月</p>
				          	<p>结束时间：</p>
				          	<p>工地状态：正常</p>
				          </div>
				       </div>
				       </a>
					</li>
					<li>
						<a href="index.html" >
						<div class="widget-box">
				          <div class="widget-title">
				            <h5>武汉市金地天悦</h5>
				          </div>
				          <div class="widget-content">
							<div class="pic"><img src="img/3.png" /></div>
							<p>武汉市蓉园路37号</p>
				          	<p>启用时间：2016年7月</p>
				          	<p>结束时间：</p>
				          	<p>工地状态：延误</p>
				          </div>
				       </div>
				       </a>
					</li>
					<li>
						<a href="index.html" >
						<div class="widget-box">
				          <div class="widget-title">
				            <h5>十堰碧桂园</h5>
				          </div>
				          <div class="widget-content">
							<div class="pic"><img src="img/1.png" /></div>
	
							<p>十堰市解放大道42号</p>
				          	<p>启用时间：2016年10月</p>
				          	<p>结束时间：</p>
				          	<p>工地状态：正常</p>
				          </div>
				       </div>
				       </a>
					</li>
					<li>
						<a href="index.html" >
						<div class="widget-box">
				          <div class="widget-title">
				            <h5>襄阳光彩市场</h5>
				          </div>
				          <div class="widget-content">
							<div class="pic"><img src="img/4.jpg" /></div>
							<p>襄阳市卧龙大道567号</p>
				          	<p>启用时间：2015年3月</p>
				          	<p>结束时间：2016年10月</p>
				          	<p>工地状态：已完工</p>
				          </div>
				       </div>
				       </a>
					</li>
					<li>
						<a href="index.html" >
						<div class="widget-box">
				          <div class="widget-title">
				            <h5>武汉雄楚大道</h5>
				          </div>
				          <div class="widget-content">
							<div class="pic"><img src="img/2.png" /></div>
							<p>武汉市雄楚大道103号</p>
				          	<p>启用时间：2016年5月</p>
				          	<p>结束时间：</p>
				          	<p>工地状态：正常</p>
				          </div>
				       </div>
				       </a>
					</li>
				</ul>
				</div>
			</div>
		</div>
  </div>

 <div style="overflow: auto;">
  	<div class="picScroll-left span2" style="border: 0;"></div>
  	<div class="picScroll-left span8" style="border: 0;">
  			<h1>项目视频</h1>
			<div class="hd-btn hd">
				<a class="next" ></a>
				<a class="prev" style="float: left;background-position: -175px 0;"></a>
			</div>
			<div class="bd">
				<div class="tempWrap" style="overflow:hidden; position:relative; width: 80% ;margin: auto;">
				<ul class="picList" style="margin: 0;">
					<li class="video-list " style="width: 185px;">
						 <div style="width: 100%;">
				            <a class="thumbnail" data-id="101">
				                <h2 class="fn-center">襄阳光彩市场</h2>
				                <img src="assets/img/videoList/video_img_101.jpg" alt=""/>
				            </a>
				        </div>
					</li>
					<li class="video-list " style="width: 185px;">
						 <div style="width: 100%;">
				            <a class="thumbnail" data-id="201">
				                <h2 class="fn-center">武汉雄楚大道</h2>
				                <img src="assets/img/videoList/video_img_201.jpg" alt=""/>
				            </a>
				        </div>
					</li>
					<li class="video-list " style="width: 185px;">
						 <div style="width: 100%;">
				            <a class="thumbnail" data-id="301">
				                <h2 class="fn-center">武汉市金地天悦</h2>
				                <img src="assets/img/videoList/video_img_301.jpg" alt=""/>
				            </a>
				        </div>
					</li>
					<li class="video-list " style="width: 185px;">
						 <div style="width: 100%;">
				            <a class="thumbnail" data-id="401">
				                <h2 class="fn-center">十堰碧桂园</h2>
				                <img src="assets/img/videoList/video_img_401.jpg" alt=""/>
				            </a>
				        </div>
					</li>
					<li class="video-list " style="width: 185px;">
						 <div style="width: 100%;">
				            <a class="thumbnail" data-id="501">
				                <h2 class="fn-center">襄阳光彩市场</h2>
				                <img src="assets/img/videoList/video_img_501.jpg" alt=""/>
				            </a>
				        </div>
					</li>
					<li class="video-list " style="width: 185px;">
						 <div style="width: 100%;">
				            <a class="thumbnail" data-id="601">
				                <h2 class="fn-center">武汉雄楚大道</h2>
				                <img src="assets/img/videoList/video_img_601.jpg" alt=""/>
				            </a>
				        </div>
					</li>
				</ul>
				</div>
			</div>
		</div>
 </div>
</div>
<div class="modal fade" id="modalVideoSurveillance" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" >
        <div class="modal-dialog" role="document" style="width: 950px; height: 730px">
            <div class="modal-content">
                <div class="modal-header" style="width: 100%">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div style="width: 950px; height: 700px">
                    <video class="video_xu" width="900" height="600" controls="controls" autoplay="autoplay" style="margin:22px 23px">
                        <source src="mp4/movie.mp4" type="video/mp4">
                        <object data="mp4/movie.mp4" width="750" height="560">
                            <embed src="mp4/movie.mp4" width="750" height="560">
                        </object>
                    </video>
                </div>
            </div>
        </div>
    </div>
<div style="position: fixed;bottom: 0%; width: 100%; text-align: center;background: #1f262d;height: 40px;line-height: 40px;">
    <span style="font-size:14px;color:gray;">版权所有 &copy; XX科技有限公司 2015-2018 推荐使用webkit内核浏览器，如chrome等</span>
</div>
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.ui.custom.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery.uniform.js"></script> 
<script src="js/select2.min.js"></script> 
<script src="js/jquery.dataTables.min.js"></script> 
<script src="js/matrix.js"></script> 
<script src="js/matrix.tables.js"></script>
<Script src="js/jquery.SuperSlide.2.1.1.js"></Script>
<script type="text/javascript">
$("#shezhi").click(function(){
	$("#list").show();
})
	jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:false,vis:3,trigger:"click"});


//**********许永霖***********
$(document).ready(function(){
    $(".thumbnail").click(function(){
            //此处写点击触发的操作
//            $(this).css("display","none");
            //1、取得播放器的对象
            var objVideo=$(".video_xu");
            //2、调用视频播放API
            objVideo.load();
    });
});
//   ********** 结束***********
</script>




<!--&lt;!&ndash;许永霖&ndash;&gt;-->
 <!--&lt;!&ndash;jQuery库脚本&ndash;&gt;-->
 <!--&lt;!&ndash;非IE8浏览器&ndash;&gt;-->
 <!--&lt;!&ndash;&lt;!&ndash;[if !(IE 8)]>&lt;!&ndash;><script type="text/javascript" src="assets/lib/jquery/jquery.min.js"></script>&lt;!&ndash;<![endif]&ndash;&gt;&ndash;&gt;-->
 <!--&lt;!&ndash;&lt;!&ndash;IE8浏览器&ndash;&gt;&ndash;&gt;-->
 <!--&lt;!&ndash;&lt;!&ndash;[if IE 8]><script type="text/javascript" src="assets/lib/jquery/jquery-ie8.min.js"></script><![endif]&ndash;&gt;&ndash;&gt;-->
 <!--&lt;!&ndash;&lt;!&ndash;日历控件样式&ndash;&gt;&ndash;&gt;-->
 <!--<script type="text/javascript" src="assets/lib/jQuery-slimScroll-1.3.8/jquery.slimscroll.min.js"></script>-->
 <!--<script charset="utf-8" src="assets/lib/bootstrap-3.3.5-dist/js/bootstrap.js"></script>-->
 <!--<script charset="utf-8" src="assets/lib/bootstrap-3.3.5-dist/js/bootstrap-progressbar.js"></script>-->
 <!--<script charset="utf-8" src="assets/common/centerModal.js"></script>-->
 <!--<script charset="utf-8" src="assets/common/loadHeaderAndCopyright.js"></script>-->
 <!--<script charset="utf-8" src="assets/common/ajaxPoster.js"></script>-->
 <!--<script charset="utf-8" src="assets/js/videoSurveillance.js"></script>-->

 <!--jQuery库脚本-->
 <!--非IE8浏览器-->
 <!--[if !(IE 8)]><script type="text/javascript" src="assets/lib/jquery/jquery.min.js"></script><![endif]-->
 <!--IE8浏览器-->
 <!--[if IE 8]><script type="text/javascript" src="assets/lib/jquery/jquery-ie8.min.js"></script><![endif]-->
 <!--日历控件样式-->
 <script type="text/javascript" src="assets/lib/jQuery-slimScroll-1.3.8/jquery.slimscroll.min.js"></script>
 <script charset="utf-8" src="assets/lib/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
 <script charset="utf-8" src="assets/lib/bootstrap-3.3.5-dist/js/bootstrap-progressbar.js"></script>
 <script charset="utf-8" src="assets/common/centerModal.js"></script>
 <script charset="utf-8" src="assets/common/loadHeaderAndCopyright.js"></script>
 <script charset="utf-8" src="assets/common/ajaxPoster.js"></script>
 <script charset="utf-8" src="assets/js/videoSurveillance.js"></script>
<!--结束-->
</body>
</html>
